<template>
  <el-row>
    <div class="handle-box">
      <el-button v-if="power.includes('brand.del')" type="primary" icon="el-icon-delete" class="handle-del mr10" @click="delAllSelection">批量删除</el-button>
      <el-input v-model="query.qw" placeholder="关键词" class="handle-input mr10"></el-input>
      <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
      <el-button v-if="power.includes('brand.add')" type="primary" icon="el-icon-plus" v-to="{ name: 'brand-editing', params: { id: 'new' } }">新增</el-button>
    </div>
    <el-table
      :data="brands"
      border
      class="table"
      ref="multipleTable"
      header-cell-class-name="table-header"
      @selection-change="handleSelectionChange"
      v-loading="loading"
    >
      <el-table-column type="selection" width="55" align="center"></el-table-column>
      <el-table-column prop="name" label="名称" fixed="left"></el-table-column>
      <el-table-column label="封面" align="center">
        <template v-slot="{ row }">
          <el-image class="table-td-thumb" :src="row.logo | imgurl" :preview-src-list="[row.logo] | imgurl"></el-image>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" fixed="right">
        <template v-slot="{ row }">
          <template>
            <el-button
              v-if="power.includes('brand.edit')"
              type="text"
              icon="el-icon-edit"
              v-to="{ name: 'brand-editing', params: { id: row.id } }"
            >
              编辑
            </el-button>
            <el-button v-if="power.includes('brand.del')" type="text" icon="el-icon-delete" class="danger" @click="handleDelete(row)">删除</el-button>
            <span v-if="!power.includes('brand.edit') && !power.includes('brand.del')">无可执行的操作</span>
          </template>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        background
        layout="total, prev, pager, next, sizes, jumper"
        :current-page="query.page"
        :page-size="query.size"
        :page-sizes="pageSizes"
        :total="total"
        @size-change="query.size = $event"
        @current-change="handlePageChange"
      ></el-pagination>
    </div>
  </el-row>
</template>

<script>
import { brandSearch, brandDel, brandDels } from '@/api/brand'
import { analysisQuery } from '@/utils'
import { mapGetters } from 'vuex'
export default {
  data() {
    return {
      query: {
        qw: '',
        page: 1,
        size: 10,
      },
      loading: false,
      pageSizes: [5, 10, 30, 100],
      brands: [],
      multipleSelection: [],
      total: 0,
    }
  },
  computed: {
    ...mapGetters('user', ['power']),
  },
  watch: {
    query: {
      deep: true,
      handler(query) {
        this.$router.replace({ path: './', query }).catch((err) => err)
      },
    },
  },
  methods: {
    delAllSelection() {
      const { multipleSelection } = this
      if (!multipleSelection.length) return this.$message('请勾选要删除的商品')
      const ids = multipleSelection.map((e) => e.id)
      this.$confirm(`确定要删除所选的${multipleSelection.length}个商品吗？`, '提示', {
        type: 'warning',
      })
        .then(async () => {
          const { code } = await brandDels({ ids })
          if (code !== 200) return this.$message.error('删除商品失败,错误码:' + code)
          this.$message.success('删除成功')
          this.getBrandList()
        })
        .catch(() => {})
    },
    // 触发搜索按钮
    handleSearch() {
      this.$set(this.query, 'page', 1)
      this.getBrandList()
    },
    // 多选操作
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    // 获取品牌列表
    async getBrandList() {
      this.loading = true
      const data = await brandSearch(this.query)
      this.loading = false
      this.brands = data.data
      this.total = data.total
    },
    // 分页导航
    handlePageChange(val) {
      this.$set(this.query, 'page', val)
      this.getBrandList()
    },
    // 删除操作
    handleDelete(row) {
      // 二次确认删除
      this.$confirm('确定要删除吗？', '提示', {
        type: 'warning',
      })
        .then(async () => {
          const { code } = await brandDel(row)
          if (code !== 200) return this.$message.error('删除商品失败,错误码:' + code)
          this.$message.success('删除成功')
          this.getBrandList()
        })
        .catch(() => {})
    },
  },
  created() {
    Object.assign(this.query, analysisQuery(this.$route.query))
    this.handleSearch()
  },
}
</script>

<style lang="scss" scoped>
.handle-box {
  margin-bottom: 12px;
}

.handle-select {
  width: 120px;
}

.handle-input {
  width: 300px;
  display: inline-block;
}
.table {
  width: 100%;
  font-size: 14px;
}
.warning {
  color: #e6a23c;
}
.danger {
  color: #ff0000;
}
.success {
  color: #67c23a;
}
.mr10 {
  margin-right: 10px;
}
::v-deep {
  .el-image {
    display: block;
    margin: auto;
    height: 40px;
    img {
      height: 100%;
      width: auto;
    }
  }
}
</style>
